import React, { Component } from 'react';
import autoBind from 'react-autobind';
import moment from 'moment';
import qs from 'qs';
import { Link, browserHistory } from 'dva/router';
import { NavBar, Icon, Button, Toast } from 'antd-mobile';

import { getUserId } from '../../../utils/utils'
import { getUserName } from '../../../utils/utils'
// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

// utils 
import dataCenter from '../../../utils/dataCenter'

class OrderDetailBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)
    }
    componentDidMount() {
    	const { dispatch, params } = this.props

    	dispatch({
    		type: 'order/getOrderDetail',
    		payload: {
    			orderId: params.orderId,
    			userId: getUserId()
    		}
    	})
    }
    onSubmitOrder() {
    	const { order, dispatch } = this.props

    	dispatch({
    		type: 'order/submitOrder',
    		payload: {
    			...order.orderDetail
    		}
    	})
    }
    
	render() {
		const { order } = this.props
	 	return (
	 		<div className={styles["order-detail"]}>
	 			<div className={styles['order-detail-wrap']}>
		 			<div className={styles['order-detail-item']}>
		 				<div className={styles['order-detail-item-shop']}>
		 					{order.orderDetail && order.orderDetail.brandName}
		 				</div>
		 				<div className={styles['order-detail-item-order']}>
		 					订单号：{order.orderDetail && order.orderDetail.orderSn}
		 				</div>
		 			</div>
		 			<div className={styles["order-position-wrap"]}>
			 			<div className={styles["order-position"]}>
			 				<div className={styles["order-position-top"]}>
			 					<span>{order.orderDetail && order.orderDetail.consignee}</span>
			 				</div>
			 				<div className="order-position-detail">
			 					<img src={require('../../../assets/icon/location.png')} style={{width: '0.28rem', verticalAlign: 'middle', marginRight: '0.12rem'}}/>
			 					
				 				<span className={styles["order-position-des"]}>
				 					{order.orderDetail && order.orderDetail.provinceName}
				 					{order.orderDetail && order.orderDetail.cityName}
				 					{order.orderDetail && order.orderDetail.districtName}
				 					{order.orderDetail && order.orderDetail.address}
				 				</span>
			 				</div>
			 			</div>
		 			</div>

		 			<div className={styles["order-item-productions"]}>
		 				<div className={styles['order-item-productions-title']}>
		 					商品明细 <span>({order.orderDetail && order.orderDetail.goodsList && order.orderDetail.goodsList.length}共件)</span>
		 				</div>

		 				{
		 					order.orderDetail && order.orderDetail.goodsList.map((good, ii) => {
	 							return (<div key={ii} className={styles["order-item-productions-item"]}>
		 							<img src={good.goodsThumb} className={styles['order-item-productions-img']} />
		 							<div className={styles['order-item-productions-right']} >
		 								<div className={styles['order-item-productions-sub-title']} >
		 								{good.goodsName}
		 								</div>
		 								<div className={styles['order-item-productions-attr']}>
		 								{good.goodsAttrs}
		 								</div>
		 								<div className={styles['order-item-productions-money']}>
		 									<span style={{color: 'rgba(255,0,82,1)', marginRight: '0.42rem'}}>￥{good.goodsPrice}</span>
		 									<span style={{marginRight: '0.42rem'}}>x{good.goodsNumber}</span>
		 								</div>
		 							</div>
		 						</div>)
		 					})
		 				}
		 			</div>

		 			<div className={styles["order-item"]}>
		 				<span className={styles["order-detail-item-title"]}>
		 					配送
		 				</span>
		 				<span className={styles["order-detail-item-value"]}>
		 					{order.orderDetail && order.orderDetail.shippingName}
		 				</span>
		 			</div>

		 			<div className={styles["order-item"]}>
		 				<div className={styles['order-detail-item-des']}>
		 					 <span className={styles['order-detail-item-left']}>商品金额</span>
		 					 <span className={styles['order-detail-item-right']}>￥{order.orderDetail && order.orderDetail.goodsAmount}</span>
		 				</div>
		 				<div className={styles['order-detail-item-des']}>
		 					<span className={styles['order-detail-item-left']}>+运费</span>
		 					<span className={styles['order-detail-item-right']}>￥{order.orderDetail && order.orderDetail.shippingFee}</span>
		 				</div>

		 				<div className={styles['order-detail-item-count']}>
		 					<span style={{color: 'rgb(192,192,192)', position: 'relative', top: '0.12rem'}}>下单时间：{order.orderDetail && order.orderDetail.addTime ? moment(order.orderDetail.addTime).format('YYYY/MM/DD HH:mm') : null}</span>
		 					<span className={styles['order-detail-item-count-price']}>实付款：<span style={{color: 'rgb(255, 0, 82)', fontSize: '0.4rem'}}>￥{order.orderDetail && order.orderDetail.orderAmount}</span></span>
		 				</div>
		 			</div>


		 			<div className={styles["order-item"]}>
		 				<span className={styles["order-detail-item-title"]}>
		 					订单留言
		 				</span>
		 				<span className={`${styles["order-detail-item-value"]} ${styles['order-detail-item-right-value']}`}>
		 					{order.orderDetail && order.orderDetail.remark || '无'}
		 				</span>
		 			</div>

		 			{
		 				order.orderDetail && order.orderDetail.orderStatus != '0' ? (
		 					<div className={styles["order-item"]}>
				 				<div className={styles['order-item-title']}>
				 				支付宝支付
				 				</div>
				 				<div style={{color: '#959595', fontSize: '0.26rem', marginTop: '0.04rem'}}>
					 				<span>流水号: {order.orderDetail && order.orderDetail.paySn}</span>
					 				<span style={{float: 'right'}}>支付时间: {order.orderDetail && order.orderDetail.payTime ? moment(order.orderDetail.payTime).format('YYYY/MM/DD HH:mm') : null}</span>
				 				</div>
				 			</div>
		 					) : null
		 			}	

		 			<div className={styles["order-item"]} style={{background: 'transparent', border: 'none'}}>

		 			{
		 				order.orderDetail && order.orderDetail.orderStatus == '0' ? (<Button className="meyley-button-red" onClick={() => browserHistory.push(`/cashier?orderSn=${order.orderDetail.orderSn}&orderAmount=${order.orderDetail.orderAmount}`) }>提交支付</Button>) : null
		 			}
		 			{
		 				order.orderDetail && order.orderDetail.orderStatus == '1' ? (<Button className="meyley-button-red" onClick={() => { Toast.info('待开发') }}>催发货</Button>) : null
		 			}
		 			{
		 				order.orderDetail && order.orderDetail.orderStatus == '2' ? (<Button className="meyley-button-red" onClick={() => { Toast.info('待开发') }}>确认收货</Button>) : null
		 			}
		 			</div>
		 		</div>
	 		</div>
	  	);
	}
};

OrderDetailBody.propTypes = {
};

export default OrderDetailBody
